import React from 'react'
import styled from 'styled-components'

import github from '../../../assets/image/github.png';
import github_hover from '../../../assets/image/github_hover.png';
import twitter from '../../../assets/image/twitter.png';
import twitter_hover from '../../../assets/image/twitter_hover.png';
import discord from '../../../assets/image/tele.png';
import img_lianan from '../../../assets/image/img_lianan.png';
import medium from '../../../assets/image/medium.png';
import medium_hover from '../../../assets/image/medium_hover.png';

const Nav: React.FC = () => {
  return (
    <StyledNav>
  
      <StyledLink1 href="https://ht.mdex.com/#/swap?inputCurrency=0x0298c2b32eae4da002a15f36fdf7615bea3da047&outputCurrency=0xb6ccFA7Ef3a295932536E0988CffD85228cB177c" target="_blank">
      BUY  sCASH
      </StyledLink1>
      <StyledLink1 href="https://ht.mdex.com/#/swap?inputCurrency=0x0298c2b32eae4da002a15f36fdf7615bea3da047&outputCurrency=0x41198c6736d23734E6d17a6F0B4f2D15d2621A3a" target="_blank">
      BUY  SHARE
      </StyledLink1>
      <StyledLink1 href="https://supernova-cash.gitbook.io/supernova-cash/" target="_blank">
      Docs
      </StyledLink1>
      <StyledLink href="https://github.com/supernova-cash" target="_blank">
      <img
        src={github}
        alt={`github Logo`}
        width={27}
      />
      </StyledLink>
      <StyledLink href="https://twitter.com/Supernova_cash" target="_blank">
      <img
        src={twitter}
        alt={`twitter Logo`}
        width={32}
      />
      </StyledLink>
      <StyledLink href="https://medium.com/@SuperNo71545205" target="_blank">
      <img
        src={medium}
        alt={`medium Logo`}
        width={28}
      />
      </StyledLink>
      <StyledLink href="https://t.me/joinchat/Q-OygC9FuN6ZGl8J" target="_blank">
      <img
        src={discord}
        alt={`discord Logo`}
        width={38}
      />
      </StyledLink>
      <StyledLink href="https://supernova-asset-1301136455.cos.ap-hongkong.myqcloud.com/pdf/supernova-Smart-Contract-Audit-Report-en.pdf" target="_blank">
      <img
        src={img_lianan}
        alt={`img_lianan Logo`}
        width={38}
      />
      </StyledLink>
    </StyledNav>
  )
}

const StyledNav = styled.nav`
  align-items: center;
  display: flex;
`

const StyledLink = styled.a`
  color: ${props => props.theme.color.grey[400]};
  padding-left: ${props => props.theme.spacing[5]}px;
  padding-right: ${props => props.theme.spacing[5]}px;
  text-decoration: none;
  font-size: 13px;
  &:hover {
    color: ${props => props.theme.color.grey[500]};
  }
  @media (max-width: 768px) {
    padding-left: ${props => props.theme.spacing[3]}px;
   padding-right: ${props => props.theme.spacing[3]}px;
   };
`
const StyledLink1 = styled.a`
  color: ${props => props.theme.color.grey[400]};
  padding-left: ${props => props.theme.spacing[5]}px;
  padding-right: ${props => props.theme.spacing[5]}px;
  text-decoration: none;
  font-size: 13px;
  &:hover {
    color: ${props => props.theme.color.grey[500]};
  }
  @media (max-width: 768px) {
   display:none;
   padding-left: ${props => props.theme.spacing[3]}px;
  padding-right: ${props => props.theme.spacing[3]}px;
  };
`
export default Nav